<template>
	<div style="width: 150%">
		<button class="delete" data-toggle="modal" data-target="#myModal" v-if="region == 'admin'">添加课程</button>
		<h3 class="pageTitle">课程信息表管理 </span></h3>
		<button class="delete">重置</button>
		<hr class="pageTitle" />
		<h4 class="pageTitle">筛选条件 <span class="label label-default">学期</span></h4>
		<div>
			<!-- 加粗 -->
			<b class="pageTitle">所属学院:</b>
			<select class="option" @change="selectOne($event)">
				<option value="all">全部</option>
				<option value="计算机学院">计算机学院</option>
				<option value="外国语学院">外国语学院</option>
			</select>
			<b style="margin-left: 100px;">搜索:</b>
			<input type="text" v-model="courseNo" class="search" placeholder="请输入课程名称,编号">
			<button type="button" @click="courseNoAjax" class="btn btn-default">筛选</button>
		</div>
		<hr class="pageTitle" />
		<router-link to="/edu/up" class="btn btn-default pageTitle courseinfo">导入课程信息</router-link>
		<router-view></router-view>
		<span class="rightCondition">
			<img src="../../public/img/cloudup.png" />
			<img src="../../public/img/condition.png" style="width: 20px;height: 20px;" />
		</span>
		<br /><br />
		<table class="table table-condensed pageTitle">
			<thead>
				<tr>
					<th>序号</th>
					<th>课程编号</th>
					<th>课程名称</th>
					<th>总学时</th>
					<th>学分</th>
					<th>所属院系</th>
					<th>课程类别</th>
					<th>考试方式</th>
					<th v-if="region == '尚未登录!'"></th>
					<th v-else>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(it,index) of items" :key="it.id">
					<td>
						<label>
							<input type="checkbox" :value="index + 1" v-model="checkedNames">
							<span>{{ index + 1 }}</span>
						</label>
					</td>
					<td>{{ it.courseno }}</td>
					<td>{{ it.coursename }}</td>
					<td>{{ it.totalperiod }}</td>
					<td>{{ it.credit }}</td>
					<td>{{ it.faculty }}</td>
					<td>{{ it.category }}</td>
					<td>{{ it.score }}</td>
					<td v-if="region == 'admin'">
						<a style="cursor: pointer;" @click="deleteCourse(it.id)">删除</a>
					</td>
					<td v-if="region == 'student'">
						<a style="cursor: pointer;" @click="stuSelectCourse(it.id)">选课</a>
					</td>
					<td v-if="region == 'teacher'">
						<a style="cursor: pointer;" @click="showInfo()">查看</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="pageTitle">
			<label>
				<input type="checkbox" v-model="checked" @change="changeAllChecked()">全选
				<a>批量删除</a>
			</label>
			<span class="page">
				共:<i>{{ items.length }}</i>条
				<select class="option">
					<option>10条/页</option>
					<option>20条/页</option>
				</select>
				<ul class="pagination pagination-sm page">
					<li><a href="javascript:void(0)" @click="pageQuery(1)">&laquo;</a></li>
					<li><a href="javascript:void(0)" @click="pageQuery(1)">1</a></li>
					<li><a href="javascript:void(0)" @click="pageQuery(2)">2</a></li>
					<li><a href="javascript:void(0)" @click="pageQuery(3)">3</a></li>
					<li><a href="javascript:void(0)" @click="pageQuery(4)">4</a></li>
					<li><a href="javascript:void(0)" @click="pageQuery(5)">5</a></li>
					<li><a href="javascript:void(0)" @click="pageQuery(5)">&raquo;</a></li>
				</ul>
				跳转到:<input type="text" v-model="pageNo" style="width: 20px;" /> &nbsp;页 &nbsp;
				<input type="button" value="确定" @click="pageQuery(pageNo)" />
			</span>
		</div>
		<!-- 模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							<b>请在下方填写新的课程信息</b>
						</h4>
					</div>
					<div class="modal-body">
						<input type="hidden" ref="userId" />
						课程编号: <input type="text" v-model="course.courseno" class="form-control"
							placeholder="课程编号"><br />
						课程名称: <input type="text" v-model="course.coursename" class="form-control"
							placeholder="课程名称"><br />
						总学时: <input type="text" class="form-control" v-model="course.totalperiod"
							placeholder="总学时"><br />
						学分:<input type="text" class="form-control" placeholder="学分" v-model="course.credit"><br />
						所属院系:
						<template>
							<el-select v-model="value" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</template>
						<br /><br />
						课程类别:<input type="text" class="form-control" placeholder="课程类别" v-model="course.category"><br />
						考试方式: <input type="text" class="form-control" placeholder="考试方式" v-model="course.score"><br />
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="saveCoureseInfo">
							提交更改
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</div>

</template>

<script>
	//引入axios
	import axios from 'axios'

	axios.defaults.withCredentials = true //携带cookie
	export default {
		name: 'About',
		data() {
			return {
				items: [''],
				courseNo: '',
				pageNo: 1,
				checked: false,
				isLogin: false,
				checkedNames: [],
				checkedArr: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
				region: '',
				options: [{
					value: '计算机学院',
					label: '计算机学院'
				}, {
					value: '外国语学院',
					label: '外国语学院'
				}],
				value: '',
				course: {
					courseno: '',
					coursename: '',
					totalperiod: '',
					credit: '',
					faculty: '',
					category: '',
					score: ''
				}
			}
		},
		mounted() {
			this.loading()
		},
		methods: {
			loading() {
				axios({
						//请求地址
						url: 'http://localhost:8080/axios/queryCoursePage.do',
						//请求方式
						method: 'post',
					}).then(
						res => {
							//登录成功
							this.items = res.data.items.list
						},
						err => {
							console.log(err.message)
						}
					),
					//挂载完成查询身份
					axios({
						//请求地址
						url: 'http://localhost:8080/axios/selectRegion.do',
						//请求方式
						method: 'post',
					}).then(
						res => {
							//请求成功
							this.region = res.data.region
						},
						err => {
							console.log(err.message)
						}
					)
			},
			//保存课程信息
			saveCoureseInfo() {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/insertSelectiveCourse.do',
					//请求方式
					method: 'post',
					params: {
						courseno: this.course.courseno,
						coursename: this.course.coursename,
						totalperiod: this.course.totalperiod,
						credit: this.course.credit,
						faculty: this.value,
						category: this.course.category,
						score: this.course.score

					}
				}).then(
					res => {
						window.reload()
						alert("添加课程成功")
						this.loading()
					},
					err => {
						console.log(err.message)
					}
				)
			},
			changeAllChecked: function() {
				if (this.checked) {
					this.checkedNames = this.checkedArr
				} else {
					this.checkedNames = []
				}
			},
			showInfo() {
				alert("暂未开放!请联系管理员")
			},
			//学生选课 
			stuSelectCourse(courseId) {
				//首先判断是否登录
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/isLogin.do',
					//请求方式
					method: 'post',
				}).then(
					res => {
						this.isLogin = res.data.isLogin
						if (this.isLogin == false) {
							alert("您尚未登录,请先登录！")
						} else {
							axios({
								//请求地址
								url: 'http://localhost:8080/axios/insertCourseBySt',
								//请求方式
								method: 'post',
								params: {
									courseid: courseId
								}
							}).then(
								res => {
									alert(res.data.msg)
								},
								err => {
									console.log(err.message)
								}
							)
						}
					},
					err => {
						console.log(err.message)
					}
				)
			},
			//单体条件查询
			selectOne(event) {
				if (event.target.value != 'all') {
					axios({
						//请求地址
						url: 'http://localhost:8080/axios/searchCollegeCourses',
						params: {
							faculty: event.target.value,
							pageNo: 1
						},
						//请求方式
						method: 'post',
					}).then(
						res => {
							console.log(res.data)
							this.items = res.data.result
						},
						err => {
							console.log(err.message)
						}
					)
				}
				//重新加载全部数据
				else {
					axios({
						//请求地址
						url: 'http://localhost:8080/axios/queryCoursePage.do',
						//请求方式
						method: 'post',
					}).then(
						res => {
							//登录成功
							this.items = res.data.items.list
						},
						err => {
							console.log(err.message)
						}
					)
				}
			},
			//根据页码查询
			courseNoAjax() {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/searchCourseNo',
					params: {
						courseno: this.courseNo
					},
					//请求方式
					method: 'post',
				}).then(
					res => {
						//请求成功
						this.items = res.data.item
					},
					err => {
						console.log(err.message)
					}
				)

			},
			//完成分页查询
			pageQuery(num) {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/selectAllCourse',
					params: {
						pageNo: num
					},
					//请求方式
					method: 'post',
				}).then(
					res => {
						//请求成功
						this.items = res.data.items
					},
					err => {
						console.log(err.message)
					}
				)
			},
			//删除课程
			deleteCourse(num) {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/deleteCourseByAd',
					params: {
						id: num
					},
					//请求方式
					method: 'post',
				}).then(
					res => {
						//请求成功
						alert(res.data.msg)
						this.loading()
					},
					err => {
						console.log(err.message)
					}
				)
			}
		},
		watch: {
			"checkedNames": function() {
				if (this.checkedNames.length == this.checkedArr.length) {
					this.checked = true
				} else {
					this.checked = false
				}
			}
		}
	}
</script>
